<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">
    </head>
    <body>
        <div>用户注册</div>
        <div>
            <input placeholder="请输入用户名" id="userName"  /><span></span><br/>
            1、需同时8-16位的数字、字母组成<br/>
            <input placeholder="请输入密码" id="passWord" /><span></span><br/>
            1、需同时包含大小写字母,数字<br/>
            2、需包含!_#特殊字符中的一个<br/>
            3、8-16位<br/>
            <input placeholder="请重复输入密码" id="passWord2" /><span></span><br/>
            1、需与前面输入的密码一致<br/>
            <input placeholder="请输入邮箱" id="email" /><span></span><br/>
            1、通用邮箱格式<br/>
            <input placeholder="请输入身份证号" id="idcard" /><span></span><br/>
            1、身份证格式<br/>
        </div>
        <div id="submit">提交</div>
    </body>
    <script>
        (function(){
            document.getElementById('submit').onclick = function(){
                let userName = document.getElementById('userName').value
                let passWord = document.getElementById('passWord').value
                let passWord2 = document.getElementById('passWord2').value
                let email = document.getElementById('email').value
                let idcard = document.getElementById('idcard').value
                
                let reg1=/^[a-zA-Z]\w{7,15}$/;
                reg2 = /^[\W\da-zA-Z_]{6,20}$/,//密码 6--20位数字,字母,任意字符
                reg3 = /^[a-z1-9](?:\w|\-)+@[a-z\d]+\.[a-z]{2,4}$/i,
                reg4 = /^[1234568][\d]{16}[\dxX]$/;

                let n1 = false,
                n2 = false,
                n3 = false,
                n4 = false,
                n5m = false;

                userName.onfocus = function(){
                span[0].innerHTML = '请输入8-16位数字,字母';
                span[0].style.color = 'green';
            }
                //用户名离开焦点时
                userName.onblur = function(){
                    if(this.value == ''){
                        span[0].innerHTML = '用户名不能为空！';
                        span[0].style.color = 'red';
                    } else if(!reg1.test(this.value)){
                        span[0].innerHTML = '请输入8-16位数字,字母';
                        span[0].style.color = 'red';
                    } else {
                        span[0].innerHTML = '格式正确!';
                        span[0].style.color = 'green';
                        return n1 = true;
                    }
                }
                //密码获得焦点时
                password.onfocus = function(){
                span[1].innerHTML = '请输入6--20位数字,字母,任意字符';
                span[1].style.color = 'green';
                }
                //密码离开焦点时
                password.onblur = function(){
                if(this.value == ''){
                span[1].innerHTML = '密码不能为空！';
                span[1].style.color = 'red';
                } else if(!reg2.test(this.value)){
                span[1].innerHTML = '请输入6--20位数字,字母,任意字符';
                span[1].style.color = 'red';
                } else {
                span[1].innerHTML = '格式正确!';
                span[1].style.color = 'green';
                return n2 = true;
                }
                }
                
                //确认密码获得焦点时
                passwordTwos.onfocus = function(){
                span[2].innerHTML = '请确认两次密码一致';
                span[2].style.color = 'green';
                }
                //确认密码离开焦点时
                passwordTwos.onblur = function(){
                if(this.value == ''){
                span[2].innerHTML = '确认密码不能为空！';
                span[2].style.color = 'red';
                } else if(this.value != password.value){
                span[2].innerHTML = '两次密码不相同';
                span[2].style.color = 'red';
                } else {
                span[2].innerHTML = '确认密码正确!';
                span[2].style.color = 'green';
                return n3 = true;
                }
                }
                
                //邮箱获得焦点时
                mailbox.onfocus = function(){
                span[3].innerHTML = '请输入您的邮箱';
                span[3].style.color = 'green';
                }
                //邮箱离开焦点时
                mailbox.onblur = function(){
                if(this.value == ''){
                span[3].innerHTML = '邮箱不能为空';
                span[3].style.color = 'red';
                } else if(!reg3.test(this.value)){
                span[3].innerHTML = '邮箱格式不对';
                span[3].style.color = 'red';
                } else {
                span[3].innerHTML = '邮箱正确！';
                span[3].style.color = 'green';
                return n4 = true;
                }
                }

                //身份证号获得焦点时
                identity.onfocus = function(){
                span[4].innerHTML = '请输入您的身份证号';
                span[4].style.color = 'green';
                }
                //身份证号离开焦点时
                identity.onblur = function(){
                if(this.value == ''){
                span[4].innerHTML = '身份证号不能为空';
                span[4].style.color = 'red';
                } else if(!reg4.test(this.value)){
                span[4].innerHTML = '身份证号格式不对';
                span[4].style.color = 'red';
                } else {
                span[4].innerHTML = '身份证正确！';
                span[4].style.color = 'green';
                return n5 = true;
                }
                }
                let regs = n1==false||n2==false||n3==false||n4==false;
                console.log(regs);
                if(!regs == false){
                alert('您 填 写 的 信 息 有 误 !');
                return false;
                } else if(choose.checked == false){
                alert('请 先 点 击 确 认 已 阅 读 按 钮 ！');
                return false;
                } else {
                alert('登 记 成 功 ！');
                window.open("http://www.baidu.com");
                return true;
                }
                }
            
        })()
    </script>
</html>